<!DOCTYPE html>
<html>
  <head>
    <title>贪吃蛇</title>
    <meta charset="utf-8" />
    <style type="text/css">
      .txt-center {
        text-align: center;
      }
      .container {
        margin: 0 auto;
        position: relative;
      }
      .container::after {
        display: block;
        width: 100%;
      }
      .container .red {
        background-color: red;
      }
      .container .green {
        background-color: green;
      }
      .container .black {
        background-color: #000;
      }
      .td {
        position: absolute;
        border: 1px solid #000;
      }
      .alert {
        width: 200px;
        height: 50px;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: none;
        text-align: center;
        vertical-align: middle;
        background-color: #fff;
        border-radius: 5px 5px 5px 5px;
        box-shadow: 0px 1px 10px -6px #aaa;
      }
    </style>
  </head>
  <body>
    <h1 class="txt-center">贪吃蛇</h1>
    <section class="container" id="container"></section>
    <div class="alert" id="menu">
      <p>点击重新开始游戏</p>
    </div>

    <script type="text/javascript" src="./game.js"></script>
    <script type="text/javascript">
      function showMenu(doc) {
        doc.style.display = "block";
      }

      var alt = document.getElementById("menu");

      var snake = new Game("container");
      //游戏初始化
      snake.Main();
      snake.start();
      snake.rgCallBack("gameOver", showMenu, document, [alt]);

      alt.onclick = function () {
        alt.style.display = "none";
        snake.start();
      };
    </script>
  </body>
</html>
